<script setup lang="ts">
import { getImgSrc } from '@/views/product/reno14-pro/image/5/img-src'
import DefaultSection from '../../components/default-section.vue'
import { useWindowSize } from '@vueuse/core'

const sectionData = [
  {
    title: ['冰晶散热片 ', '秒速退烧贴'],
    desc: '纳米冰晶冷却液，3 倍于石墨散热能力，开启散热倍速模式。',
    coverSrc: {
      mo: getImgSrc('images-game-chip-1-mo-1.jpg.webp'),
      pad: getImgSrc('images-game-chip-1-pad-1.jpg.webp'),
      pc: getImgSrc('images-game-chip-1-pc-1.jpg.webp'),
    },
  },
  {
    title: ['至高 16GB+1TB 超大内存'],
    desc: '超速大内存护体，轻松拿捏重载应用，久用也能丝滑到底。',
    coverSrc: {
      mo: getImgSrc('images-game-chip-2-mo-1.jpg.webp'),
      pad: getImgSrc('images-game-chip-2-pad-1.jpg.webp'),
      pc: getImgSrc('images-game-chip-2-pc-1.jpg.webp'),
    },
  },
]

const { width } = useWindowSize()
</script>

<template>
  <div
    class="grid max-sm:gap-y-[1.75rem] sm:grid-cols-2 sm:grid-rows-1 sm:gap-x-[0.25rem] lg:gap-x-[clamp(0.25rem,-0.25rem+0.7813vw,0.5rem)]"
  >
    <template v-if="width < 640">
      <DefaultSection
        v-for="(i, key) in sectionData"
        :key
        :title="i.title"
        :desc="i.desc"
        :cover-src="i.coverSrc"
      />
    </template>

    <template v-else>
      <div v-for="(i, key) in sectionData" :key>
        <picture>
          <source media="(min-width: 1024px)" :srcset="i.coverSrc.pc" />
          <source media="(min-width: 640px)" :srcset="i.coverSrc.pad" />
          <img
            class="w-full aspect-[351/245] object-cover _rounded overflow-hidden"
            :src="i.coverSrc.mo"
            alt=""
            loading="lazy"
          />
        </picture>

        <div
          class="bg-white py-[clamp(0.5rem,-0.8771rem+3.3898vw,0.75rem)] px-[clamp(1.125rem,-0.9407rem+5.0847vw,1.5rem)] lg:py-[clamp(1.125rem,0rem+1.7578vw,1.6875rem)] lg:px-[clamp(1.625rem,-0.125rem+2.7344vw,2.5rem)] lg:mt-[0.25rem] _rounded"
        >
          <p class="text-lg lg:text-[clamp(1.25rem,-0.25rem+2.3438vw,2rem)]">
            <span v-for="(s, _k) in i.title" :key="_k">{{ s }}</span>
          </p>
          <p class="text-xs lg:text-lg">{{ i.desc }}</p>
        </div>
      </div>
    </template>
  </div>
</template>
